<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bt3.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
  <style>
    body{
      background-color: #2e2e2e;
    }
    .navbar{
      background-color: black;
      border: 0;  /*0或none 都是去掉边框*/
      margin-top: 10px;
    }
    .navbar-brand>img{
      /*微调某个元素的位置 使用相对定位*/
      position: relative;
      bottom: 12px;
    }
    /*搜索框样式*/
    form>input{
      background-color: #383838;
      border: 0;
      height: 30px;
      border-radius: 30px;/*圆角*/
      padding: 10px 20px;
      margin-top: 10px;
      outline: none;/*去掉外边框*/
      color: #a9a8a8;
    }
    /*搜索按钮样式*/
    form>button{
      background-color: rgba(0,0,0,0); /*背景透明*/
      border: 0;
      color: #a9a8a8;
      position: relative;
      right: 40px;
    }
    /*瀑布流相关样式*/
    .grid-item{
      width: 200px; /*瀑布流元素宽度*/
      margin: 0 10px 10px 0;/*每个元素的间距*/
      overflow: hidden;
    }
    /*右侧边栏相关样式*/
    .list-group-item{
      background-color: black;
      color: #ffc600;
      border: 0;
    }
    .list-head{
      background-color: #ffc600;
      color: black;
    }
    /*蓝色信息条样式*/
    .floatView{
      background-color: #0aa1ed;
      height: 40px;
      text-align: center;
      color: #ffc600;
      position: absolute;/*绝对定位*/
      bottom: 0;/*显示到最下方*/
      width: 100%;
      display: none;/*让元素隐藏*/
    }
    .floatView>p{
      margin: 0;
      font-size: 14px;
    }
    .well{
      background-color: black;
      border: none;
      text-align: center;
      color: #ffc600;
    }
    /*添加图片的引入移出缩放动画*/
    img{
      transition-duration: 2s;/*设置动画持续时间*/
    }
    img:hover{
      transform: scale(1.2);/*让图片缩放1.2倍*/
    }
  </style>
</head>
<body>
  <myheader :category_arr="category_arr" :wd="wd" :isLogin="isLogin"></myheader>

  <section class="container">
    <!--轮播图开始-->
    <div id="myCarousel" class="carousel slide">
      <!-- 轮播（Carousel）指标 -->
      <ol class="carousel-indicators">
        <li v-for="(b,i) in banner_arr" data-target="#myCarousel" :data-slide-to="i" :class="i==0?'active':''"></li>

      </ol>
      <!-- 轮播（Carousel）项目 -->
      <div class="carousel-inner">
        <!--i代表遍历的下标-->
        <div v-for="(b,i) in banner_arr" class="item"
             :class="i==0?'active':''">
          <img :src="b.imgurl" alt="First slide">
          <div class="carousel-caption"></div>
        </div>

      </div>
      <!-- 轮播（Carousel）导航 -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!--轮播图结束-->
    <!--主体区域开始-->
    <div class="row">
      <div class="col-md-9">
        <!--瀑布流开始-->
        <div class="grid">
          <div v-for="p in product_arr" class="grid-item">
            <a :href="'detail.html?id='+p.id">
              <img class="img-responsive" :src="p.imgurl" alt="">
            </a>
            <!--蓝条开始-->
            <div class="floatView">
              <p v-text="p.title"></p>
              <span class="fa fa-eye" v-text="p.viewCount"></span>
              <span class="fa fa-thumbs-o-up" v-text="p.likeCount"></span>
            </div>
            <!--蓝条结束-->
          </div>
        </div>
        <!--瀑布流结束-->
      </div>
      <div id="right_div" class="col-md-3">
        <!--浏览最多开始-->
        <ul class="list-group">
          <li class="list-group-item list-head">
            <h4>
              <i class="fa fa-eye">浏览最多</i>
            </h4>
          </li>
          <li v-for="p in view_arr" class="list-group-item">
            <!-- 左对齐 -->
            <div class="media">
              <div class="media-left">
                <a :href="'detail.html?id='+p.id">
                <img :src="p.imgurl" class="media-object" style="width:45px">
                </a>
              </div>
              <div class="media-body">
                <a :href="'detail.html?id='+p.id">
                <h4 v-text="p.title" class="media-heading">左对齐</h4>
                <p v-text="p.intro">这是一些示例文本...</p>
                </a>
              </div>
            </div>
          </li>
        </ul>
        <!--浏览最多结束-->

        <!--最受欢迎开始-->
        <ul class="list-group">
          <li class="list-group-item list-head">
            <h4>
              <i class="fa fa-eye">最受欢迎</i>
            </h4>
          </li>
          <li v-for="p in like_arr" class="list-group-item">
            <!-- 左对齐 -->
            <div class="media">
              <div class="media-left">
                <a :href="'detail.html?id='+p.id">
                <img :src="p.imgurl" class="media-object" style="width:45px">
                </a>
              </div>
              <div class="media-body">
                <a :href="'detail.html?id='+p.id">
                <h4 v-text="p.title" class="media-heading">左对齐</h4>
                </a>
                <p v-text="p.intro">这是一些示例文本...</p>
              </div>
            </div>
          </li>
        </ul>
        <!--最受欢迎结束-->
      </div>
    </div>
    <!--主体区域结束-->
  </section>

  <!--网页底部-->
  <footer class="container">
    <div class="well">
    <b> Copyright © 2018 Tedu.cn All Rights Reserved
      京ICP备16053980号-5 <a href="http://www.tedu.cn/">达内时代科技集团有限公司</a>
      版权所有
    </b> <span class="pull-right"> <b>Version</b> 0.1.0
			</span>
    </div>
  </footer>

</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<!--引入瀑布流相关的js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<!--引入图片加载完成相关的js文件-->
<script src="js/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/header.js"></script>
<script src="js/banner.js"></script>
<script src="js/product.js"></script>
<script src="js/right.js"></script>
</html>





